<!-- 
  知识回顾:
     web前端三大核心技术
        html、css和javascript
        
     html
       => 概念：超文本标记语言
       => 作用: 负责网页结构，实现网页内容
       => 语法: <开始标签>内容<结束标签>  <h1>内容</h1>
                <标签/>                 <br/> <hr/>
       => 学习html就是学习标签元素
       => 常用标签元素
           h1-h6
           p
           br
           hr
           a
           img
           ul li
           table
           form
             input

           重点:
           div  块标签
           span 行内标签
           扩展： p标签 块标签  -> 行内标签
                    display:block;
                    display:inline;
                    display:inline-block; 行块元素
                 行内标签元素： 宽高和内容宽高一样   
    
    css
       => 概念： 层叠样式表和级联样式
       => 作用： 负责网页外观，美化网页
       => 语法:  选择器{样式表}       
       => 学习css就是学习选择器和样式
       => 选择器
            => 选中html标签元素的方式方法

       => 选择器分类
            基础选择器
              ID  class  标签
            高级选择器
               层次  伪类  N:nth-child(1)  属性 N[attr] N[attr=value]

            * ,
       =>常用样式
           字体样式  font
           文本样式  color  text-align  text-indent  text-decoration  
           背景样式  background-color  background-image  background-postion  background-reapt
                    backgournd-size
           列表     list-style
        
      => 盒子模型
           每个html元素都可以看作是一个盒子，都具有盒子特性. 
              width height padding margin border

       
       

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: pink;
            /* 块元素->行内元素 */
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>内容1</div>
    <div>内容2</div>
</body>
</html>          